<template>
  <div class="common-body-wrapper">
    <search-header
      single-width="130"
      :searchList="searchList"
      @changeHeight="toRetTable"
      @confirmSearch="toSearch"
      :isNeedTree="true"
      :isNeedAreaTree="isNeedAreaTree"
      :isNeedChannelTree="isNeedChannelTree"
      :isCheckbox="true"
      :paramName="paramName"
      :paramNameForAreaTree="paramNameForAreaTree"
      :paramNameForChannelTree="paramNameForChannelTree"
      :areaTreeData="areaTreeData"
      :channelTreeData="channelTreeData"
      :reloadAreaTree="reloadAreaTree"
      :reloadChannelTree="reloadChannelTree"
      @setSelectedNode="selectParkingLotNode2"
      @setSelectedAreaNode="setSelectedAreaNode"
      @setSelectedChannelNode="setSelectedChannelNode"
    ></search-header>

    <div class="common-table-tree-wrapper">
      <div class="common-table-wrapper">
        <multi-fun-table
          :sortColumn="notFormatColumn"
          :orderType="sortType"
          :fixed-cols="fixedCols"
          :is-reset-table="isResetTable"
          :theads-info="theadsInfo"
          :tbodys-info="tbodysInfo"
          @handleMultiCheck="handleMultiCheck"
          @handleSortColumn="handleSortColumn"
          @searchFn="getList"
          @getNextPage="getNextPage"
        >
          <div class="operate-btn-group" slot="operateBtnGroup">
            <a
              class="ake_btn ake_btn_text"
              v-if="isPermmited('PARKING_OPERATION:INOUT_RECORD:EXPORT')"
              @click.prevent="exportData()"
            >导出</a>
          </div>
          <template slot="tdCell" slot-scope="props">
            <el-table-column
              :fixed="props.fixed"
              :label="props.label"
              :min-width="props.minWidth"
              :width="props.width"
              :prop="props.prop"
              :sortable="props.sortable"
            >
              <template slot-scope="scope">
                <span v-if="'reno' == props.prop">{{scope.$index+1}}</span>
                <span v-else-if="'carNoImageUrl' == props.prop">
                  <span
                    v-if="(scope.row[props.prop]==null || scope.row[props.prop]=='') && scope.row['carImageUrl']"
                  >
                    <a
                      class="imgLink"
                      @click="showBigImgModal('bigPicModal', scope.row['carImageUrl'])"
                    >查看大图</a>
                  </span>
                  <span
                    v-else-if="(scope.row[props.prop]==null || scope.row[props.prop]=='') && !scope.row['carImageUrl']"
                  >暂无图片</span>
                  <a
                    v-else
                    class="imgLink"
                    @click="showBigImgModal('bigPicModal', scope.row['carImageUrl'])"
                  >
                    <img
                      class="carNoImage"
                      style="width: 60px;height:30px;"
                      alt="暂无"
                      :src="scope.row[props.prop]"
                    />
                  </a>
                </span>
                <span v-else-if="'outCarNoImageUrl' == props.prop">
                  <span
                    v-if="(scope.row[props.prop]==null || scope.row[props.prop]=='') && scope.row['outCarImageUrl']"
                  >
                    <a
                      class="imgLink"
                      @click="showBigImgModal('bigPicModal', scope.row['outCarImageUrl'])"
                    >查看大图</a>
                  </span>
                  <span
                    v-else-if="(scope.row[props.prop]==null || scope.row[props.prop]=='') && !scope.row['outCarImageUrl']"
                  >暂无图片</span>
                  <a
                    v-else
                    class="imgLink"
                    @click="showBigImgModal('bigPicModal', scope.row['outCarImageUrl'])"
                  >
                    <img
                      class="carNoImage"
                      style="width: 60px;height:30px;"
                      alt="暂无"
                      :src="scope.row[props.prop]"
                    />
                  </a>
                </span>
                <span
                  class="row-href"
                  v-else-if="'carNo'==props.prop && (scope.row.supportVirtualCarcode || scope.row[props.prop].indexOf('智')>-1)"
                  @click.prevent="checkBindingCarCode(scope.row,'bindingCarCodeModal')"
                >{{ scope.row[props.prop] }}</span>
                <span
                  v-else-if="'carNo'== props.prop && !scope.row.supportVirtualCarcode"
                >{{scope.row[props.prop] | carNoDis}}</span>
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="scope.row.abnormalOutReason"
                  placement="right"
                  v-else-if="'checkOutTypeStr'== props.prop && scope.row.checkOutType === 'EXCEPTION'"
                >
                  <span class="imgLink">{{scope.row[props.prop]}}</span>
                </el-tooltip>

                <span v-else>{{ scope.row[props.prop] }}</span>
              </template>
            </el-table-column>
          </template>

          <!--操作列内的按钮-->
          <template slot="operateCell" slot-scope="props">
            <el-table-column
              :fixed="props.fixed"
              :label="props.label"
              width="80"
              class-name="operateCell"
            >
              <template slot-scope="scope">
                <!-- <el-button :disabled="scope.row['wholeParkInOut']!=1" size="small" type="primary" icon="icon-info" title="详情" class="ake-icon-font" @click="toDetail(scope.row)" plain></el-button> -->
                <!-- scope.row['wholeParkInOut'] && scope.row['wholeParkInOut']==1 -->
                <el-button
                  :disabled="scope.row['wholeParkInOut']===0"
                  size="small"
                  type="primary"
                  icon="icon-info"
                  title="详情"
                  class="ake-icon-font"
                  @click="toDetail(scope.row)"
                  plain
                ></el-button>
              </template>
            </el-table-column>
          </template>
        </multi-fun-table>

        <table-pagination :size="total" :cur-page="pageNumber" @backData="getPagination"></table-pagination>
      </div>
    </div>

    <el-dialog title="详情" :visible.sync="dialogVisibleForDetail" width="700px" class="zb-dialog">
      <div class="parkinglot-showInfo-content main-content-box">
        <table class="top-table">
          <tr>
            <td>车主</td>
            <td>--</td>
          </tr>
          <tr>
            <td>停车场</td>
            <td>{{tableData.parkName}}</td>
          </tr>
          <tr>
            <td>交易凭证</td>
            <td>{{tableData.carNo | carNoDis}}</td>
          </tr>
          <tr>
            <td>进场时间</td>
            <td>{{tableData.checkInTimeStr}}</td>
          </tr>
          <tr>
            <td>离场时间</td>
            <td>{{tableData.checkOutTimeStr}}</td>
          </tr>
          <tr>
            <td>停车时长</td>
            <td>{{tableData.parkTime}}</td>
          </tr>
          <tr>
            <td>应收金额</td>
            <td>
              <span>{{tableData.billValue}}</span>
              <div v-show="tableData.chargeTimeStr" class="isShowParkTime">
                <span>({{tableData.chargeTimeStr}})</span>
                <div class="tipsBox">
                  <i class="el-icon-question"></i>
                  <div class="tips right">
                    <p>计费时长:请求计费时间-进场时间</p>
                  </div>
                </div>
              </div>
            </td>
          </tr>
          <tr>
            <td>待收金额</td>
            <td>{{tableData.needPay}}</td>
          </tr>
          <tr>
            <td>备注</td>
            <td>{{tableData.remark}}</td>
          </tr>
        </table>
        <table class="bottom-table">
          <tr>
            <td>支付来源</td>
            <td>支付方式</td>
            <td width="45px">应收金额</td>
            <td width="45px">实收金额</td>
            <td width="45px">优惠金额</td>
            <td width="60px">车场积分抵扣</td>
            <td width="70px">平台积分抵扣</td>
            <td>支付时间</td>
          </tr>
          <tr v-for="item in detailData">
            <td>{{item.payOriginRemark}}</td>
            <td>{{item.payModeRemark}}</td>
            <td>{{item.shouldValue}}</td>
            <td>{{item.realValue}}</td>
            <td>{{item.reliefValue}}</td>
            <td>{{item.parkReliefValue | parkReliefValue}}</td>
            <td>{{item.cityReliefValue | cityReliefValue}}</td>
            <td>{{item.payTime | mileSecondToDate}}</td>
          </tr>
        </table>
      </div>
    </el-dialog>

    <big-pic-modal ref="bigPicModal">
      <img
        slot="bigImgSlot"
        :src="bigImgPath | setImgPath"
        alt
        @error="imgError('../../', 'car', $event)"
      />
    </big-pic-modal>

    <!-- 展示已绑定的车牌号 -->
    <basic-modal ref="bindingCarCodeModal" width="500" customeClass>
      <h3 slot="title">车牌号</h3>
      <div class="modal-body" slot="modal-body">
        <p v-for="(item,index) in bindingCarCodeList">
          <span>逻辑卡号{{index+1}}：</span>
          <span>{{item.carCode}}</span>
          <span>({{item.cardCode}})</span>
        </p>
      </div>
      <div class="modal-footer" slot="modal-footer"></div>
    </basic-modal>
  </div>
</template>

<script>
import common from "@mixins/common.js";
import stardardList from "@mixins/tables/stardardList.js";

//modal
import invokeModal from "@mixins/modal/invokeModal.js";
import BigPicModal from "@components/widgets/BigPicModal.vue";

// 引进vue的js
import park_inout_record from "./js/park_inout_record.js";

export default {
  mixins: [common, stardardList, invokeModal, park_inout_record],
  components: {
    BigPicModal
  },
  data() {
    const today = [
      new Date(moment().format("YYYY-MM-DD 00:00:00")),
      new Date(moment().format("YYYY-MM-DD 23:59:59"))
    ];
    return {
      // 已绑定车牌列表
      bindingCarCodeList: [],
      total: 0,
      fixedCols: 0,
      paramName: "parkIds",
      paramNameForAreaTree: "areaIds",
      paramNameForChannelTree: "enterChannelNames", //单个通道(enterChannelName="通道名") 多个通道(enterChannelNames="通道名,通道名")
      tableData: {
        //详情上表格
        parkName: "",
        carNo: "",
        checkInTimeStr: "",
        checkOutTimeStr: "",
        parkTime: "",
        billValue: "",
        needPay: ""
      },
      detailData: [], //详情下表格
      searchList: [
        {
          index: 1,
          isShow: false,
          type: "datePicker",
          name: "query_leaveTime",
          text: "离场时间",
          propName: "fromLeaveTime,toLeaveTime",
          value: today,
          style: { width: "360px" }
        },
         {
          //复合型输入框
          index: 2,
          isShow: false,
          type: "mixedInput",
          name: "query_carNo",
          text: "",
          value: "query_carNo",
          inputVal: "",
          style: { width: "70px" },
          isHandleChange: true,
          btnFlag: "query_logicCardCode",
          options: [
            {
              name: "车牌号",
              value: "query_carNo"
            },
            {
              name: "卡票号",
              value: "query_cardCode"
            },
            {
              name: "自助码",
              value: "query_selfCode"
            },
            {
              name: "逻辑卡号",
              value: "query_logicCardCode"
            },
            {
              name: "卡面号码",
              value: "query_faceCardCode"
            }
          ]
        },
        {
          index: 3,
          isShow: false,
          type: "datePicker",
          name: "query_time",
          text: "进场时间",
          propName: "fromTime,toTime",
          value: "",
          style: { width: "360px" }
        },
        {
          index: 4,
          isShow: false,
          type: "select",
          name: "query_inType",
          text: "进场放行模式",
          value: "",
          options: []
        },
        {
          index: 5,
          isShow: false,
          type: "select",
          name: "query_status",
          text: "离场状态",
          value: "",
          options: [
            {
              name: "全部",
              value: ""
            },
            {
              name: "已离场",
              value: "0"
            },
            {
              name: "未离场",
              value: "1"
            }
          ]
        },
        {
          index: 6,
          isShow: false,
          type: "select",
          name: "query_outType",
          text: "离场放行模式",
          value: "",
          options: []
        },
        {
          index: 7,
          isShow: false,
          type: "text",
          name: "operatorName",
          text: "放行操作员",
          value: ""
        }
      ],
      theadsInfo: [
        {
          index: 1,
          isShow: false,
          prop: "topBillCode",
          text: "停车流水号",
          initHidden: true
        },
        {
          index: 2,
          isShow: false,
          prop: "parkName",
          text: "停车场"
        },
        {
          index: 3,
          isShow: false,
          prop: "areaName",
          text: "所属区域",
          initHidden: true
        },
        {
          index: 4,
          prop: "carNo",
          text: "车牌号码",
          minWidth: 80
        },
        {
          index: 5,
          isShow: false,
          prop: "carNoImageUrl",
          text: "进场图片"
        },
        {
          index: 6,
          isShow: false,
          prop: "checkInTimeStr",
          text: "进场时间",
          minWidth: 70
        },
        {
          index: 7,
          isShow: false,
          prop: "enterChannelName",
          text: "进场通道",
          initHidden: true
        },
        {
          index: 8,
          isShow: false,
          prop: "checkInTypeStr",
          text: "进场放行模式"
        },
        {
          index: 9,
          isShow: false,
          prop: "inOperatorName",
          text: "进场放行操作员",
          initHidden: true
        },
        {
          index: 10,
          isShow: false,
          prop: "enterVipTypeStr",
          text: "进场VIP类型",
          initHidden: true
        },
        {
          index: 11,
          isShow: false,
          prop: "status",
          text: "离场状态"
        },
        {
          index: 12,
          isShow: false,
          prop: "checkOutTimeStr",
          text: "离场时间"
        },
        {
          index: 13,
          isShow: false,
          prop: "leaveChannelName",
          text: "离场通道",
          initHidden: true
        },
        {
          index: 14,
          isShow: false,
          prop: "outCarNoImageUrl",
          text: "离场图片"
        },
        {
          index: 15,
          isShow: false,
          prop: "checkOutTypeStr",
          text: "离场放行模式"
        },
        {
          index: 16,
          isShow: false,
          prop: "outOperatorName",
          text: "离场放行操作员",
          initHidden: true
        },
        {
          index: 17,
          isShow: false,
          prop: "leaveVipTypeStr",
          text: "离场VIP类型",
          initHidden: true
        },
        {
          index: 18,
          isShow: false,
          prop: "parkTime",
          text: "停车时长"
        },
        {
          index: 19,
          isShow: false,
          prop: "billValue",
          text: "停车费用"
        },
        {
          index: 20,
          isShow: false,
          prop: "carCodeModifyStatus",
          text: "校正状态",
          initHidden: true
        }
        //  {
        //   index: 3,
        //   isShow: false,
        //   prop: "carNo",
        //   text: "交易凭证",
        // },
      ],
      tbodysInfo: [],
      detailRow: {
        theadsInfo: [
          {
            index: 1,
            prop: "",
            text: "车主",
            minWidth: 80
          },
          {
            index: 2,
            prop: "parkName",
            text: "停车场",
            minWidth: 130
          },
          {
            index: 3,
            prop: "carNo",
            text: "车牌号码",
            minWidth: 80
          },
          {
            index: 4,
            prop: "checkInTimeStr",
            text: "进场时间",
            minWidth: 150
          },
          {
            index: 5,
            prop: "checkOutTimeStr",
            text: "离场时间",
            minWidth: 150
          },
          {
            index: 6,
            prop: "parkTime",
            text: "停车时长",
            minWidth: 80
          },
          {
            index: 7,
            prop: "billValue",
            text: "应收金额",
            minWidth: 50
          },
          {
            index: 8,
            prop: "needPay",
            text: "待收金额",
            minWidth: 50
          },
          {
            index: 9,
            prop: "payOriginRemark",
            text: "支付来源",
            minWidth: 50
          },
          {
            index: 10,
            prop: "payModeRemark",
            text: "支付方式",
            minWidth: 50
          },
          {
            index: 11,
            prop: "realValue",
            text: "实收金额",
            minWidth: 50
          },
          {
            index: 12,
            prop: "reliefValue",
            text: "优惠金额",
            minWidth: 50
          },
          {
            index: 11,
            isShow: false,
            prop: "checkOutTimeStr",
            text: "离场时间"
          },
          {
            index: 13,
            prop: "scoreValue",
            text: "积分抵扣",
            minWidth: 80
          },
          {
            index: 14,
            prop: "payTime",
            text: "支付时间",
            minWidth: 150
          }
        ],
        tbodysInfo: []
      }
    };
  }
};
</script>

<style lang="less" scoped>
.isShowParkTime {
  display: inline-block;
  position: relative;

  .tipsBox {
    display: inline-block;
    position: relative;
    top: 2px;

    &:hover {
      .tips {
        display: block;
      }
    }

    .el-icon-question {
      &:before {
        color: #bbbbbb;
        font-size: 18px;
      }
    }

    .tips {
      display: none;
      position: absolute;
      z-index: 12;
      padding: 10px;
      background: rgba(50, 52, 54, 0.8);
      border-radius: 5px;
      line-height: 15px;
      width: 150px;
      height: max-content;

      &.left {
        left: 0;
      }

      &.right {
        right: 0;
      }

      &.bottom {
        bottom: 35px;
      }

      p {
        color: #fff;
        text-align: justify;
        font-size: 12px;
      }
    }
  }
}

.selectGroupBox {
  display: flex;
  width: 280px;
}

span {
  img {
    width: min-content;
  }
}

.table-wrapper table tbody tr td img {
  height: 65px;
}

.top-table,
.bottom-table {
  width: 100%;

  td {
    border: 1px solid #e8ecf3;
  }
}

.top-table {
  tr {
    td {
      &:first-child {
        width: 30%;
        font-weight: 600;
        padding-left: 20px;
      }

      &:last-child {
        text-align: center;
      }
    }
  }
}

.bottom-table {
  margin-top: 30px;

  tr {
    &:first-child {
      text-align: center;
      font-weight: 600;
    }
  }

  td {
    text-align: center;
  }
}
</style>
